<template>
  <div class="container">
    <!--    用户信息-->
    <user-info-m/>

    <cell-group-m @cellClick="toMyCourse"
                  class="cellItem" src="/web-hft-ee/static/img/m/me_course.png"
                  text="我的课程">
      <template v-slot:content>
        <me-my-course :course-list="courseList"/>
      </template>
    </cell-group-m>

    <cell-group-m @cellClick="toMyCerti"
                  class="cellItem" src="/web-hft-ee/static/img/m/me_certificate.png"
                  text="我的证书">
      <template v-slot:content>
        <my-certification-grid-m :list="myCertificationList"/>
      </template>
    </cell-group-m>

    <cell-m @cellClick="toMyOrg" class="cellItem" src="/web-hft-ee/static/img/m/me_org.png"
            text="我的企业"/>
    <cell-m @cellClick="toMyPractice" class="cellItem" src="/web-hft-ee/static/img/m/me_practice.png"
            text="我的练习"/>
    <cell-m @cellClick="toFeedBack" class="cellItem" src="/web-hft-ee/static/img/m/me_issue.png"
            text="问题反馈"/>

    <div style="height: 56px"></div>


    <van-popup
      v-model="show"
      closeable
      close-icon-position="top-right"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <iframe id="iframeContain" :src="otherUrl"/>
    </van-popup>
  </div>
</template>

<script>
import UserInfoM from './components/UserInfoM'
import CellM from '../../../components/CellM'
import MeMyCourse from './components/MeMyCourseM'
import MyCertificationGridM from '../../plan/mycerti/MyCertificationGridM'
import CellGroupM from '../../../components/CellGroupM'
import MyCourse from '../../course/mycourse/MyCourse'
import MyCertiMixin from '../../plan/mycerti/MyCertiMixin'
import EnterpriseCourseAPI from '../../../repo/api/EnterpriseCourseAPI'

export default {
  components: {
    CellGroupM,
    MyCertificationGridM,
    MeMyCourse,
    CellM,
    UserInfoM,
  },
  mixins: [MyCertiMixin],

  data () {
    return {
      list: [],
      show: false,
      otherUrl: ''
    }
  },
  computed: {
    myCertificationList () {
      return this.myCertiList.filter((item, index) => index < 3)
    },
    courseList () {
      return this.list.map(item => item.subjectInfo)
    },
  },
  created () {
    this.fetchData()

  },
  mounted () {
    window['onJsLinkHuiDao'] = (jsonStr) => {
      this.onJsLinkHuiDao(jsonStr)
    }
  },
  methods: {
    fetchData () {
      MyCourse.fetchMyCourseListFromWeb()
        .then((courseList) => {
          this.list = courseList || []
        })

    },
    toMyCourse () {
      this.$router.push({name: 'mycourse'})
    },
    toMyCerti () {
      this.$router.push({name: 'mycerti'})
    },
    toMyOrg () {
      this.$router.push({name: 'myOrg'})
    },
    toMyPractice () {
      EnterpriseCourseAPI.getHuidaoUrl().then((result) => {
        let jumpUrl = result.responseData.testListUrl + '&referrer=' + encodeURIComponent(window.location.href)
        if (window.hasOwnProperty('zshft')) {
          window.zshft.onJsLinkHuiDao(jumpUrl.toString())
        }

      })
    },
    toFeedBack () {
      this.$router.push({name: 'feedback'})
    }
  },
}
</script>

<style scoped>
.container {
  /*padding-bottom: 20px;*/
}

.cellItem {
  margin-top: 8px;
}
</style>
